<template>
	<view>
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<!-- 新版本设计开始 -->
		<!-- 顶部导航 开始 -->
		<selectHead left-button="行情" right-button="自选" class="selectBox" :active-button="activeButton" @changeBtn="handleSelect">
			<view slot="left" @click="toHome()">
				<view class="" style="color: #FFFFFF;">主页</view>
			</view>
			<view slot="right">
				<view class="flex align-center" style="position: relative;" @click="tonavigateTo('/pages/public/search/search')">
					<view class="Tips end_top margin-left-xs" style="margin-right: 5rpx;position: absolute;left: -72rpx;">
						<image src="/static/images/search.png" mode="widthFix" style="width: 50rpx;"></image>
						<!-- <view class="mail_Tips"></view> -->
					</view>
					<view class="Tips end_top margin-left-xs" @click="tonavigateTo('/pages/public/msg/msg')">
						<image src="/static/images/msg.png" mode="widthFix" style="width: 50rpx;"></image>
						<!-- <view class="mail_Tips"></view> -->
					</view>
				</view>
			</view>
		</selectHead>
		<!-- 顶部导航 结束 -->
		
		<!-- 行情 开始 -->
		<view v-if="activeButton == '行情'">
			<view class="tab flex align-center bg_FFFFFF padding-lr border-bottom-FFFFFF" style="padding-bottom: 10rpx;padding-top: 15rpx;">
				<view v-for="(item,index) in items" class="tab-item margin-right-lg padding-bottom-xs" :class="current==index?'text-blue text-df':'text-w text-df'"
				 @click="current = index">{{item}}</view>
			</view>
			<!-- 全球 start -->
			<view v-if="current == 0">
				<!-- item 开始 1-->
				<view class="bg_FFFFFF text-black margin-top-sm">
					<view class="padding-sm" style="font-size: 36rpx;position: relative;">全球指数
						<view class="" style="position: absolute;right: 20rpx;top:22rpx">
							<image src="/static/imgs/hangqing_slices/6.png" mode="widthFix" style="width: 12rpx;"></image>
						</view>
					</view>
					
					<view class="table flex flex-wrap flx-row" style="justify-content: space-between;padding-bottom: 20rpx;">
						<view class="flex padding-sm align-center text-sm text-gray none">
							<view class="flex-sub radius" style="width: 30%;">名称</view>
							<view class="text-right" style="width: 30%;">现价</view>
							<view class="text-right" style="width: 20%;">涨幅</view>
							<view class="text-right" style="width: 20%;">涨跌</view>
						</view>
						<!-- 第一排第一个 -->
						<view class="flex padding-sm align-center flx-col" @click="toInfo(hengSheng)" style="width: 33%;">
							<view class="flex justify-start align-center flx-row">
								<image src="/static/imgs/hangqing_slices/3.png" mode="" style="width: 46rpx;height: 32rpx;" class="margin-right-sm"></image>
								<view class="radius">恒生指数</view>
							</view>
							<view style="font-size: 36rpx;margin: 24rpx 0 20rpx 0;" class="text-lg text-green text-right" :class="hengSheng.P>hengSheng.YC ? 'cE02C3A':'c37A037'">{{((hengSheng.P - hengSheng.YC) *10/hengSheng.YC *10) .toFixed(2)}}%</view>
							<view class="flx flx-bet" style="font-size: 22rpx;width: 90%;">
								<view class="text-bold text-right" :class="hengSheng.P>hengSheng.YC ? 'cE02C3A':'c37A037'">{{hengSheng.P}}</view>
								<view class="text-green text-right" :class="hengSheng.P>hengSheng.YC ? 'cE02C3A':'c37A037'">{{(hengSheng.P-hengSheng.YC).toFixed(2)}}</view>
							</view>
						</view>
						<!-- 第一排第二个 -->
						<view class="flex padding-sm align-center flx-col lr-border" @click="toInfo(riJing)" style="width: 33%;">
							<view class="flex justify-start align-center flx-row">
								<image src="/static/imgs/hangqing_slices/7.png" mode="" style="width: 46rpx;height: 32rpx;" class="margin-right-sm"></image>
								<view class="radius">日经225</view>
							</view>
							<view style="font-size: 36rpx;margin: 24rpx 0 20rpx 0;" class="text-lg text-green text-right" :class="riJing.P>riJing.YC ? 'cE02C3A':'c37A037'">{{((riJing.P-riJing.YC) *10/riJing.YC *10) .toFixed(2)}}%</view>
							<view class="flx flx-bet" style="font-size: 22rpx;width: 90%;">
								<view class="text-bold text-right" :class="riJing.P>riJing.YC ? 'cE02C3A':'c37A037'">{{riJing.P}}</view>
								<view class="text-green text-right" :class="riJing.P>riJing.YC ? 'cE02C3A':'c37A037'">{{(riJing.P-riJing.YC).toFixed(2)}}</view>
							</view>
						</view>
						<!-- 第一排第三个 -->
						<view class="flex padding-sm align-center flx-col" @click="toInfo(meiYuan)" style="width: 33%;">
							<view class="flex justify-start align-center flx-row">
								<image src="/static/imgs/hangqing_slices/1.png" mode="" style="width: 46rpx;height: 32rpx;" class="margin-right-sm"></image>
								<view class="radius">美元指数</view>
							</view>
							<view style="font-size: 36rpx;margin: 24rpx 0 20rpx 0;" class="text-lg text-green text-right" :class="meiYuan.P>meiYuan.YC ? 'cE02C3A':'c37A037'">{{(meiYuan.P - meiYuan.YC).toFixed(2)}}{{((meiYuan.P - meiYuan.YC) *10/meiYuan.YC *10) .toFixed(2)}}%</view>
							<view class="flx flx-bet" style="font-size: 22rpx;width: 90%;">
								<view class="text-bold text-right" :class="meiYuan.P>meiYuan.YC ? 'cE02C3A':'c37A037'">{{meiYuan.P}}</view>
								<view class="text-green text-right" :class="meiYuan.P>meiYuan.YC ? 'cE02C3A':'c37A037'">{{(meiYuan.P-meiYuan.YC).toFixed(2)}}</view>
							</view>
						</view>
						<!-- 分割线 -->
						<view class="" style="width: 100vw;height: 1rpx;background-color: #EDEDED;"></view>
						<!-- 第二排第一个 -->
						<view class="flex padding-sm align-center flx-col" @click="toInfo(daoQiongSi)" style="width: 33%;">
							<view class="flex justify-start align-center flx-row">
								<image src="/static/imgs/hangqing_slices/1.png" mode="" style="width: 46rpx;height: 32rpx;" class="margin-right-sm"></image>
								<view class="radius">道琼斯</view>
							</view>
							<view style="font-size: 36rpx;margin: 24rpx 0 20rpx 0;" class="text-lg text-green text-right" :class="daoQiongSi.P>daoQiongSi.YC ? 'cE02C3A':'c37A037'">{{((daoQiongSi.P - daoQiongSi.YC) *10/daoQiongSi.YC *10) .toFixed(2)}}%</view>
							<view class="flx flx-bet" style="font-size: 22rpx;width: 90%;">
								<view class="text-bold text-right" :class="daoQiongSi.P>daoQiongSi.YC ? 'cE02C3A':'c37A037'">{{daoQiongSi.P}}</view>
								<view class="text-green text-right" :class="daoQiongSi.P>daoQiongSi.YC ? 'cE02C3A':'c37A037'">{{(daoQiongSi.P - daoQiongSi.YC).toFixed(2)}}</view>
							</view>
						</view>
						<!-- 第二排第二个 -->
						<view class="flex padding-sm align-center flx-col lr-border" @click="toInfo(naSi)" style="width: 33%;">
							<view class="flex justify-start align-center flx-row">
								<image src="/static/imgs/hangqing_slices/1.png" mode="" style="width: 46rpx;height: 32rpx;" class="margin-right-sm"></image>
								<view class="radius">纳斯达克</view>
							</view>
							<view style="font-size: 36rpx;margin: 24rpx 0 20rpx 0;" class="text-lg text-green text-right" :class="naSi.P>naSi.YC ? 'cE02C3A':'c37A037'">{{((naSi.P - naSi.YC) *10/naSi.YC *10) .toFixed(2)}}%</view>
							<view class="flx flx-bet" style="font-size: 22rpx;width: 90%;">
								<view class="text-bold text-right" :class="naSi.P>naSi.YC ? 'cE02C3A':'c37A037'">{{naSi.P}}</view>
								<view class="text-green text-right" :class="naSi.P>naSi.YC ? 'cE02C3A':'c37A037'">{{(naSi.P - naSi.YC).toFixed(2)}}</view>
							</view>
						</view>
						<!-- 第二排第三个 -->
						<view class="flex padding-sm align-center flx-col" @click="toInfo(biaoPu)" style="width: 33%;">
							<view class="flex justify-start align-center flx-row">
								<image src="/static/imgs/hangqing_slices/1.png" mode="" style="width: 46rpx;height: 32rpx;" class="margin-right-sm"></image>
								<view class="radius">标普500</view>
							</view>
							<view style="font-size: 36rpx;margin: 24rpx 0 20rpx 0;" class="text-lg text-green text-right" :class="biaoPu.P>biaoPu.YC ? 'cE02C3A':'c37A037'">{{(biaoPu.P - biaoPu.YC).toFixed(2)}}{{((biaoPu.P - biaoPu.YC) *10/biaoPu.YC *10) .toFixed(2)}}%</view>
							<view class="flx flx-bet" style="font-size: 22rpx;width: 90%;">
								<view class="text-bold text-right" :class="biaoPu.P>biaoPu.YC ? 'cE02C3A':'c37A037'">{{biaoPu.P}}</view>
								<view class="text-green text-right" :class="biaoPu.P>biaoPu.YC ? 'cE02C3A':'c37A037'">{{(biaoPu.P - biaoPu.YC).toFixed(2)}}</view>
							</view>
						</view>
						<!-- 分割线 -->
						<view class="" style="width: 100vw;height: 1rpx;background-color: #EDEDED;"></view>
						<!-- 第三排第一个 -->
						<view class="flex padding-sm align-center flx-col" @click="toInfo(yingGuo)" style="width: 33%;">
							<view class="flex justify-start align-center flx-row">
								<image src="/static/imgs/hangqing_slices/2.png" mode="" style="width: 46rpx;height: 32rpx;" class="margin-right-sm"></image>
								<view class="radius">英国富时</view>
							</view>
							<view style="font-size: 36rpx;margin: 24rpx 0 20rpx 0;" class="text-lg text-green text-right" :class="yingGuo.P>yingGuo.YC ? 'cE02C3A':'c37A037'">{{((yingGuo.P - yingGuo.YC) *10/yingGuo.YC *10) .toFixed(2)}}%</view>
							<view class="flx flx-bet" style="font-size: 22rpx;width: 90%;">
								<view class="text-bold text-right" :class="yingGuo.P>yingGuo.YC ? 'cE02C3A':'c37A037'">{{yingGuo.P}}</view>
								<view class="text-green text-right" :class="yingGuo.P>yingGuo.YC ? 'cE02C3A':'c37A037'">{{(yingGuo.P - yingGuo.YC).toFixed(2)}}</view>
							</view>
						</view>
						<!-- 第三排第二个 -->
						<view class="flex padding-sm align-center flx-col lr-border" @click="toInfo(deGuo)" style="width: 33%;">
							<view class="flex justify-start align-center flx-row">
								<image src="/static/imgs/hangqing_slices/4.png" mode="" style="width: 46rpx;height: 32rpx;" class="margin-right-sm"></image>
								<view class="radius">德DAX30</view>
							</view>
							<view style="font-size: 36rpx;margin: 24rpx 0 20rpx 0;" class="text-lg text-green text-right" :class="deGuo.P>deGuo.YC ? 'cE02C3A':'c37A037'">{{((deGuo.P - deGuo.YC) *10/deGuo.YC *10) .toFixed(2)}}%</view>
							<view class="flx flx-bet" style="font-size: 22rpx;width: 90%;">
								<view class="text-bold text-right" :class="deGuo.P>deGuo.YC ? 'cE02C3A':'c37A037'">{{deGuo.P}}</view>
								<view class="text-green text-right" :class="deGuo.P>deGuo.YC ? 'cE02C3A':'c37A037'">{{(deGuo.P - deGuo.YC).toFixed(2)}}</view>
							</view>
						</view>
						<!-- 第三排第三个 -->
						<view class="flex padding-sm align-center flx-col" @click="toInfo(faGuo)" style="width: 33%;">
							<view class="flex justify-start align-center flx-row">
								<image src="/static/imgs/hangqing_slices/1.png" mode="" style="width: 46rpx;height: 32rpx;" class="margin-right-sm"></image>
								<view class="radius">法CAC40</view>
							</view>
							<view style="font-size: 36rpx;margin: 24rpx 0 20rpx 0;" class="text-lg text-green text-right" :class="faGuo.P>faGuo.YC ? 'cE02C3A':'c37A037'">{{(faGuo.P - faGuo.YC).toFixed(2)}}{{((faGuo.P - faGuo.YC) *10/faGuo.YC *10) .toFixed(2)}}%</view>
							<view class="flx flx-bet flex-f1" style="font-size: 22rpx;width: 90%;">
								<view class="text-bold text-right" :class="faGuo.P>faGuo.YC ? 'cE02C3A':'c37A037'">{{faGuo.P}}</view>
								<view class="text-green text-right" :class="faGuo.P>faGuo.YC ? 'cE02C3A':'c37A037'">{{(faGuo.P - faGuo.YC).toFixed(2)}}</view>
							</view>
						</view>

					</view>
				</view>
				<!-- item 开始 end -->
				<!-- item 开始  2-->
				<view class="bg_FFFFFF margin-top-sm">
					<view class="padding-sm u-border-bottom" style="color: #333333;font-size: 36rpx;">A股指数</view>
					<view class="table">
						<view class="flex padding-sm align-center text-sm text-gray">
							<view class="flex-sub radius" style="width: 30%;">名称</view>
							<view class="text-right" style="width: 30%;">现价</view>
							<view class="text-right" style="width: 20%;">涨幅</view>
							<view class="text-right" style="width: 20%;">涨跌</view>
						</view>
						<view class="flex padding-sm align-center" @click="toInfo(shangZheng)">
							<view class="flex justify-start align-center" style="width: 30%;">
								<image src="/static/imgs/hangqing_slices/3.png" mode="" style="width: 46rpx;height: 32rpx;" class="margin-right-sm"></image>
								<view class="flex-sub radius">上证指数</view>
							</view>
							<view class="text-lg text-bold text-right" style="width: 30%;" :class="shangZheng.P>shangZheng.YC ? 'cE02C3A':'c37A037'">{{shangZheng.P}}</view>
							<view class="text-lg text-green text-right" style="width: 20%;" :class="shangZheng.P>shangZheng.YC ? 'cE02C3A':'c37A037'">{{(shangZheng.P-shangZheng.YC).toFixed(2)}}</view>
							<view class="text-lg text-green text-right" style="width: 20%;" :class="shangZheng.P>shangZheng.YC ? 'cE02C3A':'c37A037'">{{((shangZheng.P-shangZheng.YC) *10/shangZheng.YC *10) .toFixed(2)}}%</view>
						</view>
						<view class="flex padding-sm align-center" @click="toInfo(chuangYe)">
							<view class="flex justify-start align-center" style="width: 30%;">
								<image src="/static/imgs/hangqing_slices/3.png" mode="" style="width: 46rpx;height: 32rpx;" class="margin-right-sm"></image>
								<view class="flex-sub radius">创业板指</view>
							</view>
							<view class="text-lg text-bold text-right" style="width: 30%;" :class="chuangYe.P>chuangYe.YC ? 'cE02C3A':'c37A037'">{{chuangYe.P}}</view>
							<view class="text-lg text-green text-right" style="width: 20%;" :class="chuangYe.P>chuangYe.YC ? 'cE02C3A':'c37A037'">{{(chuangYe.P-chuangYe.YC).toFixed(2)}}</view>
							<view class="text-lg text-green text-right" style="width: 20%;" :class="chuangYe.P>chuangYe.YC ? 'cE02C3A':'c37A037'">{{((chuangYe.P-chuangYe.YC) *10/chuangYe.YC *10) .toFixed(2)}}%</view>
						</view>
						<view class="flex padding-sm align-center" @click="toInfo(shenZheng)">
							<view class="flex justify-start align-center" style="width: 30%;">
								<image src="/static/imgs/hangqing_slices/3.png" mode="" style="width: 46rpx;height: 32rpx;" class="margin-right-sm"></image>
								<view class="flex-sub radius">深证成指</view>
							</view>
							<view class="text-lg text-bold text-right" style="width: 30%;" :class="shenZheng.P>shenZheng.YC ? 'cE02C3A':'c37A037'">{{shenZheng.P}}</view>
							<view class="text-lg text-green text-right" style="width: 20%;" :class="shenZheng.P>shenZheng.YC ? 'cE02C3A':'c37A037'">{{(shenZheng.P-shenZheng.YC).toFixed(2)}}</view>
							<view class="text-lg text-green text-right" style="width: 20%;" :class="shenZheng.P>shenZheng.YC ? 'cE02C3A':'c37A037'">{{((shenZheng.P-shenZheng.YC) *10/shenZheng.YC *10) .toFixed(2)}}%</view>
						</view>
					</view>
				</view>
				<!-- item 开始 end -->
				<!-- item 开始 3-->
				<!-- 中国经济数据 开始 -->
				<!-- 
				<view class="bg_13161E text-white margin-top-sm">
					<view class="padding-sm u-border-bottom">中国经济数据</view>
					<view class="table">
						<view class="content">
							<view class="table-box table-data">
								<z-table :tableData="tableData" :columns="columns" :emptyText="emptyText" :showLoading="false" :tableHeight="tableHeight" :stickSide="true"></z-table>
							</view>
							<u-loadmore :status="status" @loadmore="Loadmore()" :load-text="loadText" />
						</view>
					</view>
				</view>
				 -->
				<!-- 中国经济数据 结束 -->
				<!-- item 开始 end -->
			</view>
			<!-- 全球 end -->
			<!-- A股 start -->
			<view v-if="current == 1">
				<aShare></aShare>
			</view>
			<!-- A股 end -->
			<!-- A股 start -->
			<view v-if="current == 2">
				<adatl></adatl>
			</view>
			<!-- A股 end -->
			<!-- A股 start -->
			<view v-if="current == 3">
				<aturnover></aturnover>
			</view>
			<!-- A股 end -->
			<!-- A股 start -->
			<view v-if="current == 4">
				<amoneyFlow></amoneyFlow>
			</view>
			<!-- A股 end -->
		</view>
		<!-- 行情 结束 -->
		
		<!-- 自选 开始 -->
		<view v-if="activeButton == '自选'">
			<optional></optional>
		</view>
		<!-- 自选 结束 -->
		
		<!-- 新版本设计开始 end -->

	</view>
</template>

<script>
	//头部
	import selectHead from "@/component/selectHead/selectHead.vue"
	import aShare from "@/component/quotation/aShare.vue"
	import optional from "@/pages/optional/optional"
	import adatl from "@/pages/OtherPages/datl"
	import aturnover from "@/pages/OtherPages/turnover"
	import amoneyFlow from "@/pages/OtherPages/moneyFlow"
	//tab
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	
	// 中国数据 准备 开始
	import zTable from "@/components/z-table/z-table.vue";
	const {
		windowWidth,
		windowHeight
	} = uni.getSystemInfoSync();
	// 中国数据 准备 结束
	
	export default {
		components: {
			uniSegmentedControl,
			selectHead,
			aShare,
			adatl,
			aturnover,
			amoneyFlow,
			optional,
			zTable
		},
		data() {
			return {
				activeButton: "行情", //传入选中的button
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				items: ['全球股指', '涨跌榜','龙虎榜','换手率'],
				current: 0,
				shares: [],
				shangZheng: {},
				chuangYe: {},
				shenZheng: {},
				daoQiongSi: {},
				naSi: {},
				biaoPu: {},
				yingGuo: {},
				deGuo: {},
				faGuo: {},
				hengSheng: {},
				riJing: {},
				meiYuan: {},
				// 中国经济数据
				tableHeight: ((windowHeight - 42) * (750 / windowWidth)),
				tableData: [],
				emptyText: "没有数据哦！请选择其它时间查看~",
				columns: [{
						'title': '月份',
						'key': 'month',
						'width': '250',
					},
					{
						'title': '全国当月',
						'key': 'whole_same_month',
						'width': '180',
					}, {
						'title': '全国同比增长',
						'key': 'whole_with_increase',
						'width': '180',
					}, {
						'title': '全国环比增长',
						'key': 'whole_ring_increase',
						'width': '180',
					}, {
						'title': '全国累计',
						'key': 'whole_cumulative',
						'width': '180',
					}, {
						'title': '城市当月',
						'key': 'city_same_month',
						'width': '180',
					}, {
						'title': '城市同比增长',
						'key': 'city_with_increase',
						'width': '180',
					}, {
						'title': '城市环比增长',
						'key': 'city_ring_increase',
						'width': '180',
					}, {
						'title': '城市累计',
						'key': 'city_cumulative',
						'width': '180',
					}, {
						'title': '农村当月',
						'key': 'countryside_same_month',
						'width': '180',
					}, {
						'title': '农村同比增长',
						'key': 'countryside_with_increase',
						'width': '250',
					}, {
						'title': '农村环比增长',
						'key': 'countryside_ring_increase',
						'width': '180',
					}, {
						'title': '农村累计',
						'key': 'countryside_cumulative',
						'width': '180',
					},
				],
				status: 'loadmore',
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				page: 1,
				// 中国经济数据 结束了
			};
		},
		methods: {
			// 跳转页面
			tonavigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 到首页
			toHome: function() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			//选择行情/自选
			handleSelect(type) {
				this.activeButton = type == 'left' ? '行情' : '自选'
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			// 新增函数
			toInfo(data) {
				uni.navigateTo({
					url: "/pages/gzQiYe/sharesInfo?name=" + data.N + "&code=" + data.FS,
				})
			},
			getIndexShares: function() {
				this.$Request.get(this.$api.index.getIndexShares).then(res => {
                    if(res.code == 999){
                        uni.navigateTo({
                        	url: "/pages/public/login/login",
                        })
                        return
                    }
					this.shares = res.data;
					this.shangZheng = this.shares[0];
					this.chuangYe = this.shares[1];
					this.shenZheng = this.shares[2];
				})
			},
			getIndexShares2: function() {
				this.$Request.get(this.$api.index.getIndexShares2).then(res => {
					this.daoQiongSi = res.daoQiongSi;
					this.naSi = res.naSi;
					this.biaoPu = res.biaoPu;
				})
			},
			getIndexShares3: function() {
				this.$Request.get(this.$api.index.getIndexShares3).then(res => {
					this.yingGuo = res.yingGuo;
					this.deGuo = res.deGuo;
					this.faGuo = res.faGuo;
				})
			},
			getIndexShares4: function() {
				this.$Request.get(this.$api.index.getIndexShares4).then(res => {
					this.hengSheng = res.hengSheng;
					this.riJing = res.riJing;
					this.meiYuan = res.meiYuan;
				})
			},
			// 经济数据
			reload() {
				this.tableData = [];
				this.page = 1;
				this.getTableData()
			},
			getTableData() {
				this.$Request.get(this.$api.index.geteconomicdata, {
					page: this.page
				}).then(res => {
					if (res.code == 0) {
						let data = res.data;
						for (let index in data) {
							data[index].month = "<uni-view class='title'>" + data[index].month + "</uni-view>"
							data[index].whole_with_increase = this.isSuccess(data[index].whole_with_increase)
							data[index].whole_ring_increase = this.isSuccess(data[index].whole_ring_increase)
							data[index].city_with_increase = this.isSuccess(data[index].city_with_increase)
							data[index].city_ring_increase = this.isSuccess(data[index].city_ring_increase)
							data[index].countryside_with_increase = this.isSuccess(data[index].countryside_with_increase)
							data[index].countryside_ring_increase = this.isSuccess(data[index].countryside_ring_increase)
							this.tableData.push(data[index])
						}
						this.status = 'loadmore'
					}
				})
			},
			isSuccess(numim) {
				let num = Number(numim).toFixed(2)
				if (num > 0) {
					num = "<text style='color:rgb(222, 46, 46)'>" + num + "%</text>"
				} else if (num < 0) {
					num = "<text style='color:#19be6b'>" + num + "%</text>"
				}
				return num;
			},
			Loadmore() {
				this.status = 'loading';
				this.page++;
				this.getTableData();
			},
			onReachBottom() {
				this.status = 'loading';
				this.page++;
				this.getTableData();
			}
		},
		onShow() {
			this.getIndexShares()
			this.getIndexShares2()
			this.getIndexShares3()
			this.getIndexShares4()
		},
		created() {
			this.getTableData(this.current)
		},
		onLoad(e) {
			if(e.type == 2){
				this.activeButton = '自选'
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./quotation.scss";
	.selectBox{
		background-color: #EE515A;
	}
	page {
		background-color: #F2F2F2;
	}
	.mail_Tips {
		width: 16rpx;
		height: 16rpx;
		background: #E02C3A;
		border-radius: 50%;
	}
	.lr-border{
		border-left: 1rpx solid #EDEDED;
		border-right: 1rpx solid #EDEDED;
	}
	.new-card-box {
		.header {
			background-color: #efefef;
			margin-bottom: 20rpx;
			height: 80rpx;

			.u-icon {
				color: rgb(222, 46, 46);
				margin-right: 15rpx;
			}

			.icon-arrow-down {
				-webkit-transform: rotate(270deg);
				transform: rotate(270deg);
				-webkit-transform-origin: center center;
				transform-origin: center center;
			}
		}

		.content {
			align-items: center;
			text-align: center;
			margin: 0 0 20rpx 0;

			.c-title {
				text-align: center !important;
				font-weight: bold;
			}

			.c-up-down {
				text-align: center !important;
				font-weight: bold;
				margin: 10rpx 0;
				color: #de2e2e;
			}

			.c-text {
				text-align: center !important;
				font-size: 20rpx;
				color: #de2e2e;
			}
		}
	}
	// 经济数据
	.z-table {
		border: none;

		.table-empty {
			margin-top: 20rpx;
		}

		.z-table-title {
			// display: none;
			height: 90rpx;
			font-weight: bold;

			.z-table-title-item {
				background: #efefef;
				border: none;
				height: 100%;
			}
		}

		.z-table-col-text {
			text-align: center !important;
			font-size: 26rpx;

			uni-view {
				width: 100%;
			}
		}

		.z-table-stick-side {
			border: none;
		}

		.z-table-container-row {
			height: 90rpx;

			.z-table-container-col {
				line-height: unset !important;
				height: 100%;

				.title {
					font-size: 28rpx;
					font-weight: bold;
				}

				.code {
					font-size: 22rpx;
				}
			}
		}
	}
	
	.date_show {
		background-color: #efefef;
		height: 70rpx;
		border-bottom: 2px solid #fdfdfd;
		text-align: center;
		line-height: 70rpx;
	}

	.list-title {
		background-color: #efefef;
		border-top: 1px solid #fdfdfd;
		height: 90rpx;
		font-weight: bold;

		.u-col {
			text-align: center !important;
		}
	}

	.tab {
		margin-bottom: 17rpx;
		.tab-item.text-blue {
			position: relative;
			&::after{
				position: absolute;
				content: "";
				bottom: -10rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
				width: 36rpx;
				height: 6rpx;
				border-radius: 6rpx;
				background-color: #E23232;
			}
			// border-bottom: 3px solid #E23232;
			// border-radius: 3px;
			// padding-bottom: 10upx;
		}
	}
	.text-white{
		color: #333333;
	}
	.text-w{
		color: #666666;
	}
	.text-blue{
		color: #E23232;
	}
	.border-bottom-FFFFFF{
		background-color: #FFFFFF;
	}
</style>
